<template>
  <div class="nav-container">
    <el-menu
      :default-active="activeIndex"
      class="travel-menu"
      mode="horizontal"
      @select="handleSelect"
      :ellipsis="false"
      router
    >
      <div class="menu-logo">✈️ Haohaolv</div>

      <el-menu-item index="/user/first" class="menu-item">
        <span class="menu-icon">🏠</span>首页
      </el-menu-item>
      <el-menu-item index="/user/second" class="menu-item">
        <span class="menu-icon">🔥</span>最火攻略
      </el-menu-item>
      <el-menu-item index="/user/three" class="menu-item">
        <span class="menu-icon">🗺️</span>攻略集合
      </el-menu-item>
      <el-menu-item index="/user/four" class="menu-item">
        <span class="menu-icon">❤</span>我的喜欢
      </el-menu-item>
      <div class="logout-wrapper">
        <el-menu-item index="/login" class="logout-item" @click="loginOut()">
          <span class="menu-icon">🚪</span>
          退出登录
        </el-menu-item>
      </div>
    </el-menu>
    <router-view />
  </div>
</template>
  
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import { useTokenStore } from "@/stores/token.js";
import useUserInfoStore from "@/stores/userInfo.js";

const userInfoStore = useUserInfoStore();
const tokenStore = useTokenStore();

const router = useRouter();
const activeIndex = ref("/first");

const handleSelect = (key: string) => {
  router.push(key);
  activeIndex.value = key;
};

const loginOut = () => {
  ElMessageBox.confirm("您确认要退出登录吗?", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      tokenStore.removeToken();
      userInfoStore.removeInfo();
      router.push("/login");
      ElMessage({
        type: "success",
        message: "退出登录成功"
      });
    })
    .catch(error => {
      // 显式声明catch参数（此处用error占位，实际可忽略）
      ElMessage({
        type: "info",
        message: "用户取消了退出登录"
      });
    });
};
</script>
  
<style scoped>
/* 样式部分保持不变 */
.nav-container {
  position: relative;
  z-index: 1000;
}

.travel-menu {
  background: linear-gradient(135deg, #2d4279 0%, #1a2b50 100%);
  padding: 0 10%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.menu-logo {
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

.menu-item {
  color: #a0d8ff !important;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  margin: 0 15px;
  border-radius: 8px;

  &:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
  }

  &.is-active {
    color: #fff !important;
    border-bottom: 3px solid #ffd04b;
    background: rgba(255, 255, 255, 0.05);
  }
}

.menu-icon {
  margin-right: 8px;
  font-size: 1.2em;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.menu-item:hover .menu-icon {
  transform: scale(1.2);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .travel-menu {
    padding: 0 5%;
  }

  .menu-logo {
    font-size: 1.4rem;
    margin-right: 20px;
  }

  .menu-item {
    font-size: 1rem;
    margin: 0 8px;
  }
}

/* 新增样式 */
.logout-wrapper {
  margin-left: auto;
  display: flex;
  padding-right: 20px;
}

.logout-item {
  color: #ff7b7b !important;
  background: rgba(255, 123, 123, 0.1) !important;
  margin: 0 10px !important;
  transition: all 0.3s ease !important;

  &:hover {
    background: rgba(255, 123, 123, 0.2) !important;
    transform: translateY(-2px);
    color: #ff5555 !important;

    .menu-icon {
      transform: rotate(90deg) scale(1.2);
    }
  }

  &.is-active {
    border-bottom: none !important;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .logout-wrapper {
    padding-right: 10px;
  }

  .logout-item {
    font-size: 0.95rem !important;
    padding: 0 8px !important;
  }
}
</style>